<template>
    <div>
      <!-- 数组渲染列表 -->
      <h2>数组渲染列表</h2>
      <ul>
        <li v-for="(item, index) in simpleArray" :key="index">
          {{ index + 1 }}. {{ item }}
        </li>
      </ul>
  
      <!-- 对象数组渲染列表 -->
      <h2>对象数组渲染列表</h2>
      <ul>
        <li v-for="(user, index) in userArray" :key="index">
          {{ index + 1 }}. 姓名: {{ user.name }}, 年龄: {{ user.age }}
        </li>
      </ul>
  
      <!-- 对象渲染列表 -->
      <h2>对象渲染列表</h2>
      <ul>
        <li v-for="(value, key, index) in userInfo" :key="index">
          {{ index + 1 }}. {{ key }}: {{ value }}
        </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 简单数组
  const simpleArray = ref(['苹果', '香蕉', '橙子']);
  
  // 对象数组
  const userArray = ref([
    { name: '张三', age: 20 },
    { name: '李四', age: 22 },
    { name: '王五', age: 25 }
  ]);
  
  // 对象
  const userInfo = ref({
    name: '赵六',
    age: 28,
    occupation: '工程师'
  });
  </script>
  
  <style scoped>
  h2 {
    margin-top: 20px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    margin-bottom: 5px;
  }
  </style>